<template>
<div class="tc-center fl">
    <rx-center-title-swiper :data="title">
        <ul class="clearfix uiTab9 j_uiTab9">
            <li :class="{'uiTab9-active':subIndex == index}" :data-title="titleRemark[index]" @click="subSwitch(index)" v-for="(item, index) of title" :key="index">{{item}}</li>
        </ul>
    </rx-center-title-swiper>
    <div id="j-tc-center-content">
        <!-- 状态 state -->
        <div class="uiTab9Con" v-if="subIndex == 0">
            <rx-state></rx-state>
        </div>
        <!-- 项 example -->
        <div class="uiTab9Con" v-if="subIndex == 1">
            <rx-example></rx-example>
        </div>
        <!-- 阶段 example -->
        <div class="uiTab9Con" v-if="subIndex == 2">
            <rx-stage></rx-stage>
        </div>
        <!-- 基础 baseInfo -->
        <div class="uiTab9Con" v-if="subIndex == 3">
            <rx-baseInfo></rx-baseInfo>
        </div>
        <!-- 人工 personnel -->
        <div class="uiTab9Con" v-if="subIndex == 4">
            <rx-person></rx-person>
        </div>
        <!-- 材料 material -->
        <div class="uiTab9Con" v-if="subIndex == 5">
            <rx-material></rx-material>
        </div>
        <!-- 质量 quality -->
        <div class="uiTab9Con" v-if="subIndex == 6">
            <rx-quality></rx-quality>
        </div>
        <!-- 现场 scene -->
        <div class="uiTab9Con" v-if="subIndex == 7">
            <rx-scene></rx-scene>
        </div>
        <!-- 整改 change -->
        <div class="uiTab9Con" v-if="subIndex == 8">
            <rx-change></rx-change>
        </div>
        <!-- 摄像头 camera -->
        <div class="uiTab9Con" v-if="subIndex == 9">
            <rx-camera></rx-camera>
        </div>
        <!-- 管理内容 administration -->
        <div class="uiTab9Con" v-if="subIndex == 10">
            <rx-administration></rx-administration>
        </div>
        <!-- 资料 completed -->
        <div class="uiTab9Con" v-if="subIndex == 11">
            <rx-data></rx-data>
        </div>
        <!-- 客户投诉 customer -->
        <div class="uiTab9Con" v-if="subIndex == 12">
            <rx-customer></rx-customer>
        </div>
        <!-- 款项 paragraph -->
        <div class="uiTab9Con" v-if="subIndex == 13">
            <rx-paragraph></rx-paragraph>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
// 注: 所有的大组件已 rx-xxx 命名, 不要使用此示例文件命名，可保留作为参考
import rxState from './state'
import rxExample from './example'
import rxStage from './stage'
import rxBaseInfo from './baseInfo'
import rxPerson from './person'
import rxMaterial from './material'
import rxQuality from './quality'
import rxScene from './scene'
import rxChange from './change'
import rxCamera from './camera'
import rxAdministration from './administration'
import rxData from './data'
import rxCustomer from './customer'
import rxParagraph from './paragraph'

export default {
    components: {
        rxState,
        rxExample,
        rxStage,
        rxBaseInfo,
        rxAdministration,
        rxData,
        rxPerson,
        rxMaterial,
        rxQuality,
        rxScene,
        rxChange,
        rxCamera,
        rxCustomer,
        rxParagraph
    },
    data () {
        return {
            title: [],
            titleRemark: [],
            subIndex: 1,
            currentStage: ''
        }
    },
    mounted () {
        this.stage(this.leftInfo.AfterMarketState)
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    methods: {
        // 判断是否是工程经理
        stage (parone) {
            let value = ''
            switch (parone) {
            case 0:
            case 10:
                value = '审计'
                break
            case 20:
                value = '准备'
                break
            case 30:
                value = '在施'
                break
            case 31:
                value = '施前'
                break
            case 32:
                value = '施中'
                break
            case 33:
                value = '施尾'
                break
            case 40:
                value = '竣工'
                break
            case 50:
                value = '完工'
                break
            case 60:
                value = '历史'
                break
            case 70:
                value = '坏账'
                break
            case 80:
                value = '退单'
                break
            }
            this.currentStage = value
            if (this.userInfo.as_diquId === 39) {
                this.title = ['状', '项', '阶', this.currentStage, '人', '材', '质', '现', '整', '摄', '管', '资', '客', '款']
                this.titleRemark = ['状态', '项目', '阶段', this.currentStage, '人工', '材料', '质量', '现场', '整改', '摄像头', '管理', '资料', '客服', '款项']
            } else {
                // 判断是否是工程经理
                const userLevel = this.userInfo.as_level
                if (userLevel.length > 0) {
                    userLevel.forEach(ele => {
                        if (Number(ele) === 47) {
                            this.title = ['状', '项', '阶', this.currentStage, '人', '材', '质', '现', '整', '摄', '管', '资', '客', '款']
                            this.titleRemark = ['状态', '项目', '阶段', this.currentStage, '人工', '材料', '质量', '现场', '整改', '摄像头', '管理', '资料', '客服', '款项']
                        } else {
                            this.title = ['状', '项', '阶', this.currentStage, '人', '材', '质', '现', '整', '摄', '管', '资', '客']
                            this.titleRemark = ['状态', '项目', '阶段', this.currentStage, '人工', '材料', '质量', '现场', '整改', '摄像头', '管理', '资料', '客服']
                        }
                    })
                } else {
                    this.title = ['状', '项', '阶', this.currentStage, '人', '材', '质', '现', '整', '摄', '管', '资', '客']
                    this.titleRemark = ['状态', '项目', '阶段', this.currentStage, '人工', '材料', '质量', '现场', '整改', '摄像头', '管理', '资料', '客服']
                }
            }
        },
        subSwitch (index) {
            this.subIndex = index
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        }
    },
    watch: {
        leftInfo () {
            this.stage(this.leftInfo.AfterMarketState)
        }
    }
}
</script>
<style lang="scss" scoped>
    .uiTab9.j_uiTab9 li{
        min-width: 42px;
    }
</style>
